<template>
  <view class="container">
    <view class="list">
      <view class="box">
        <image class="icon" src="../../static/images/icon2.png"></image>
        <view class="row">
          <view class="text2">承办单位：</view>
          <view class="right">
            <view class="name">{{ info.company_info.company_name }}</view>
            <view class="type">{{ info.company_info.type }}</view>
          </view>
        </view>
        <view class="row">
          <view class="text2">适用对象：</view>
          <view class="right">
            <view class="desc">{{ info.applicable_objects }}</view>
          </view>
        </view>
        <view class="row">
          <view class="text2">联系人：</view>
          <view class="right">
            <view class="desc">{{ info.head_name }}，{{ info.head_mobile }}</view>
          </view>
        </view>
      </view>

      <view class="box">
        <image class="icon" src="../../static/images/icon1.png"></image>
        <!--        <view class="row">
                  <view class="text1">名称：</view>
                  <view class="right">
                    <view class="name">{{ info.name }}</view>
                  </view>
                </view>-->

        <view class="row">
          <view class="text1">地址：</view>
          <view class="right">
            <view class="desc">{{ info.address }}</view>
          </view>
        </view>
        <view class="row">
          <view class="text1">简介：</view>
          <view class="right">
            <view class="desc">{{ info.content }}</view>
          </view>
        </view>
      </view>

      <view class="box" v-for="(item, index) in info.post_list" :key="index">
        <image class="icon" src="../../static/images/icon3.png"></image>
        <view class="row">
          <view class="text2">岗位名称：</view>
          <view class="right">
            <view class="name">{{ item.name }}</view>
            <view class="info-box">
              <view class="type">上限：{{ item.max_count }}</view>
              <view class="type">报名：{{ item.join_count }}</view>
            </view>
          </view>
        </view>
        <view class="row">
          <view class="text2">辅导员：</view>
          <view class="right">
            <view class="desc">{{ item.counsellor_name }}、{{ item.counsellor_unit }}</view>
          </view>
        </view>
        <view class="row">
          <view class="text2">体验时间：</view>
          <view class="right">
            <view class="desc">{{ item.time }}</view>
          </view>
        </view>
        <view class="btn-box" v-if="!item.is_join && info.status == 2 && company_prove_id == 0">
          <navigator hover-class="none" :url="'/pages/join_post/join_post?project_id='+ info.id +'&post_id=' + item.id" class="btn">立即报名</navigator>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      info: [],
      company_prove_id: 0
    }
  },

  onLoad(options) {
    var id = options.id,
      user_id = uni.getStorageSync('user_id') ? uni.getStorageSync('user_id') : 0;

    this.company_prove_id = uni.getStorageSync('company_prove_id') ? uni.getStorageSync('company_prove_id') : 0;

    this.$http.post('/index/Api/projectDetail', {id, user_id}).then(res => {
      if (res.data.result == 1) {
        this.info = res.data.data;
      } else {
        this.$common.doErrorResult(res);
      }
    })
  },

  methods: {}
}
</script>

<style lang="scss">
.container {
  padding: 20rpx;
  background: #f5f5f5;

  .list {

    .box {
      .icon {
        width: 30rpx;
        height: 30rpx;
      }

      display: flex;
      flex-direction: column;
      padding: 16rpx 24rpx;
      margin-bottom: 20rpx;
      background: #fff;
      border-radius: 20rpx;

      .title {
        font-size: 32rpx;
        font-weight: bold;
      }

      .row {
        display: flex;
        align-items: flex-start;
        margin-top: 14rpx;
        margin-left: 50rpx;

        .text1 {
          font-size: 28rpx;
          width: 90rpx;
          font-weight: bold;
        }

        .text2 {
          font-size: 28rpx;
          width: 140rpx;
          font-weight: bold;
        }

        .right {
          min-width: 0;
          flex: 1;
          display: flex;
          align-items: flex-end;
          font-size: 24rpx;
          color: #3D3D3D;
          margin-left: 20rpx;

          .count {
            width: 100rpx;
          }

          .name {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .info-box {
            display: flex;
            justify-content: space-between;
            width: 230rpx;
            margin-left: 20rpx;
          }

          .type {
            background: #b574ff;
            padding: 2rpx 16rpx;
            border-radius: 10rpx;
            font-size: 18rpx;
            color: #fff;
          }

          .time {
            flex: 1;
          }
        }
      }

      .btn-box {
        display: flex;
        justify-content: flex-end;
        margin-top: 20rpx;

        .btn {
          font-size: 24rpx;
          color: #fff;
          background: #32a4ff;
          width: 120rpx;
          height: 60rpx;
          line-height: 60rpx;
          padding: 0 24rpx;
          border-radius: 50rpx;
          text-align: center;
          margin-left: 40rpx;
        }
      }

    }
  }

}

</style>
